<template>
  <div>
    <div class="tb">
     <van-nav-bar
 class="bt1"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="ssk">
  <div class="cs" @click="cs">{{title=city?city:"深圳"}}▼</div>
  <van-search background="transparent" placeholder="请输入小区地址"  />
  <div class="dt3">
    <van-icon name="map-marked" size="25" color="#fdfeff"/>
  </div>
</div>
</div>
<div class="sx">
  <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
    <van-dropdown-item v-model="value1" :options="option3" />
  <van-dropdown-item v-model="value2" :options="option4" />
</van-dropdown-menu>
</div>
 <div class="lb" v-for="item in list" :key="item.houseCode">
        <ul>
            <li>
              <div class="img"><img :src="`http://liufusong.top:8080${item.houseImg}`" alt=""></div>
                <div class="text">
                  <div class="h4"><h4>{{item.title}}</h4></div>
                  <p>{{item.desc}}</p>
                  <div class="dt">{{item.tags[0]}}</div>
                  <span class="span"><strong>{{item.price}}</strong>元/月</span>
                </div>
            </li>
            <hr>
        </ul>
    </div>
  </div>
</template>

<script>
import { Admin } from '@/api/article'

export default {
  data () {
    return {
      city: localStorage.getItem('city') || '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '区域', value: 0 }
      ],
      option2: [
        { text: '方式', value: 'a' }
      ],
      option3: [
        { text: '租金', value: 0 }
      ],
      option4: [
        { text: '筛选', value: 'a' }
      ],
      list: []
    }
  },
  methods: {
    cs () {
      this.$router.push('/citylist')
    }
  },
  async created () {
    const res = await Admin()
    console.log(res)
    this.list = res.body
  }
}
</script>

<style lang="less" scoped>
 .ssk{
  position: absolute;
  margin-top: -40px;
  z-index: 1;
  margin-left: 8%;
  height: 34px;
  width: 90%;
display: flex;
justify-content: center;
align-items: center;
}
.cs{
background-color: #fff;
  height: 34px;
  line-height: 34px;
  width: 60px;
  margin-right: -13px;
  text-align: center;
}
li{
width: 100%;
display: flex;
height: 110px;
margin-top: 20px;
}
ul{
  position:relative;
}
img{
  width: 120px;
height: 90px;
}
.text{
  margin-left: 10px;
  margin-top: -20px;
  height: 80px;
}
.h4{
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
p{
  margin-top: -18px;
  color: #afb2b3;
  font-size: 14px;
}
.dt{
  width: 60px;
  background-color:#e1f5f8;
  text-align: center;
  color: #74c4dc;
  height: 20px;
  font-size: 14px;
  margin-top: -5px;
}
.span{
  color: #fa5741;
}
strong{
  font-size: 18px;
}
hr{
  color: #ccc;
  border: 2px solid #fafafa;
  margin-top: 10px;
}
.bt{
  position: fixed;
  width: 100%;
  margin-top: -50px;
}

</style>
